import React,{useState,useRef} from 'react'


const Login = () => {
    const [name,setName] = useState('');
    const [passwd,setPasswd] = useState('');
    const [response,setResponse] = useState('');
    const unRef = useRef();
    const pwRef = useRef();

    var getData = ()=>{
        fetch('http://39.96.84.223:4567/verify/adminlogin', {
            method: 'POST',
            body: JSON.stringify({
                username: unRef.current.value,
                passwd: pwRef.current.value
            }),
            headers: new Headers({
                'Content-Type': 'application/json'
            })
        }).then(res=>res.json())
        .catch(err=>console.log(err))
        .then(res => setResponse(res))
        document.getElementById('login').style.display = 'block';
    }

    return (
        <div>
            <input 
                placeholder='请输入账号'
                value={name}
                onChange={e=>setName(e.target.value)}
                ref={unRef}
                type="text" 
                style={{display: 'block', marginBottom: 20}}
            />
            <input 
                placeholder='请输入密码'
                value={passwd}
                onChange={e=>setPasswd(e.target.value)}
                ref={pwRef}
                type="text" 
                style={{display: 'block', marginBottom: 20}}
            />
            <button onClick={getData}>登录</button>
            <div id={'login'} style={{display: 'none'}}>{response ? 
                <div>
                    <h1>登录成功</h1>
                    <div>学校是{response.userinfo.university}</div>
                </div> 
                : 
                <div>登录失败</div>}
            </div>
        </div>
    )
}

export default Login
